<template>
    <div class="page-hire-designer">
        <div class="board">
            <div class="avatar">
                <img v-lazy="store.baseInfo.headimgurl" alt="">
            </div>
            <div class="username">
                {{store.baseInfo.userName}}
            </div>
            <div class="btns">
                <van-button 
                    :disabled="store.isCollection"
                    size="small"
                    @click="onCollect(store.baseInfo.designerId)">
                    {{store.isCollection ? '已关注' : '关注'}}
                </van-button>
                <van-button type="primary" size="small" @click="onBook(store.baseInfo.designerId)">向他发出申请</van-button>
            </div>
        </div>

        <div class="works-container">
            <app-works :data-source="store.works.list" :hide="true"></app-works>
        </div>
    </div>
</template>

<script>
import { designerInfo } from '../../api/designer'
import { collDesigner } from '../../api/user'
import appWorks from '../../component/works'
export default {
    name: 'designer',
    props: {
        id: String
    },
    components: {
        appWorks
    },
    data(){
        return {
            store: {
                isCollection: false,
                adviser: [],
                baseInfo: {},
                orderNum: '',
                popularity: '',
                watcher: '',
                works: {
                    list: []
                }
            }
        }
    },
    methods: {
        getDetail(){
            designerInfo(this.id).then(rsp => {
                if(rsp.code === 200){
                    this.store = rsp.data
                }
            })
        },

        onCollect(designerId){
            collDesigner(designerId).then(rsp => {
                if(rsp.code === 200){
                    this.$toast.success('关注成功')
                }
            })
        },

        onBook(designerId){
            this.$router.push({name: 'bookStep', params: {designerId}})
            localStorage.bookDesignerAdvs = JSON.stringify(this.store.adviser)
            localStorage.bookDesignerInfo = JSON.stringify(this.store.baseInfo)
        },
    },
    created(){
        this.getDetail()
    }
}
</script>

<style lang="less">
.page-hire-designer{
    .board {
        position: relative;
        width: 100%;
        padding: 10% 0;
        margin-bottom: 20px;
        background: url("https://uege-1258242722.cos.ap-shanghai.myqcloud.com/ygsj/guochunsheng/sjs1.jpeg") #fff;
        background-size: 100% 100%;
        .avatar{
            width: 80px;
            height: 80px;
            margin: 0 auto 15px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 1px 1px rgba(0,0,0,.1);
            img{
                display: block;
            }
        }
        .username{
            color: #fff;
            text-shadow: 0 1px 1px rgba(0,0,0,.5);
            text-align: center;
        }
        .btns{
            margin-top: 15px;
            text-align: center;
            .van-button{
                width: 8em;
                padding-left: 0;
                padding-right: 0;
                margin: 0 10px;
                &.van-button--disabled{
                    opacity: 1;
                    color: #fff;
                    background-color: #eac02b;
                    border-color: #eac02b;
                }
            }
        }
    }

    .works-container{

    }
}
</style>